<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
</head>
<body>
<!--<p>使用@keyframes和animation实现一个元素先水平向右移动500px，然后向下移动500px，然后向左移动500px，最后向上500px回到原位，5S完成动画并一直重复</p>-->
<div class="box"></div>
</body>
<style>
    body{
        position: relative;
    }
.box{
    width: 50px;
    height: 50px;
    background: #053939;
    animation: yudong linear 5s infinite;
    position: absolute;
    left: 0;
    top: 0;
}
@keyframes  yudong {
    25%{
        left: 500px;
        top: 0;
    }
    50%{
        left: 500px;
        top: 500px;
    }
    75%{
        left: 0;
        top: 500px;
    }
    100%{
        left: 0;
        top: 0;
    }
}
</style>
</html>